<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array.join渲染</title>
</head>
<body>
<ul id="ul">

</ul>
<script>
    let ulElement = document.getElementById("ul");
    var persons = [
        {"name": "小明", "age": 12, "sex": "男"},
        {"name": "小黄", "age": 15, "sex": "女"},
        {"name": "小黑", "age": 452, "sex": "女"}
    ]
    for (let person of persons) {
        let fragments = [
            '<li>',
            '<div class="hd">的基本信息</div>',
            '<div class="bd">',
            '<p>name：</p>',
            '<p>age：</p>',
            '<p>sex：</p>',
            '</div>',
            '</li>'
        ];
        //拼接divup
        let divup = fragments[1];
        let name_index= divup.indexOf("的");
        fragments[1] = divup.substr(0, name_index)+person.name+divup.substr(name_index, divup.length);
        //拼接divdown
        let name_str = fragments[3];
        let age_str = fragments[4];
        let sex_str = fragments[5];
        let p_name_index = name_str.indexOf("：");
        let p_age_index =age_str.indexOf("：")
        let p_sex_index =sex_str.indexOf("：")
        fragments[3] = name_str.substr(0, p_name_index+1)+person.name+name_str.substr(p_name_index+1, name_str.length);
        fragments[4] = age_str.substr(0, p_age_index+1)+person.age+age_str.substr(p_age_index+1, age_str.length);
        fragments[5] = sex_str.substr(0, p_sex_index+1)+person.sex+sex_str.substr(p_sex_index+1, sex_str.length);
        console.log(fragments)
        ulElement.innerHTML+= fragments.join("");
    }
</script>
</body>
</html>